<template>
  <div class="details">
    <ContentWrap v-loading="loading">
      <!-- <div class="button-container" style="padding-top:0">
        <Button type="primary" @click="closeCurrentTag">返回</Button>
      </div> -->
      <List :column="4" sep="：" label-width="100" default-value="--">
        <ListItem label="购买渠道" dict-type-code="PURCHASE_CHANNEL" :value="detailObj.buyChannel" />
        <ListItem label="工单编号" :value="detailObj.workOrderCode" />
        <ListItem label="工单状态" :value="detailObj.workOrderState" dict-type-code="WORK_ORDER_STATUS" />
        <ListItem label="创建时间" :value="detailObj.createTime || '--'" />
        <ListItem label="创建人" :value="detailObj.createrName?`${detailObj.createrName}(${detailObj.createBy})${detailObj.createByPlatformNo?' - ' + detailObj.createByPlatformNo:''}`:''" />
        <ListItem label="会员等级" :value="detailObj.level" />
        <ListItem label="联系人" :value="detailObj.contactName" />
        <ListItem label="联系电话" :value="detailObj.contactPhone" />
        <ListItem v-show="detailObj.buyChannel==='1'" label="顾客ID" :value="detailObj.nickname" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="电商平台" :value="detailObj.onlinePlatformName || '--'" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="电商店铺" :value="detailObj.onlineShopName || '--'" />
        <ListItem label="平台订单号" :value="detailObj.orderCode" />
        <ListItem label="电商单号" :value="detailObj.ecOrderNumber" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="下单时间" :value="detailObj.orderTime ? detailObj.orderTime : '--'" />
        <ListItem v-show="detailObj.buyChannel==='1'" label="预约送货时间" :value="detailObj.deliveryTime || '--'" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="配送方式" dict-type-code="CC_DELIVERY_TYPE" :value="detailObj.deliveryMethod" />
        <ListItem label="省" :value="detailObj.provinceName" />
        <ListItem label="市" :value="detailObj.cityName" />
        <ListItem label="区/县" :value="detailObj.countyName" />
        <ListItem label="街道" :value="detailObj.streetName" />
        <ListItem label="详细地址" :span="24" :value="detailObj.detailAddress" />
        <ListItem label="完成时间" :span="24" :value="detailObj.finishTime ? detailObj.finishTime : '--'" />
        <ListItem label="联系渠道" dict-type-code="CHANNEL_TYPE" :value="detailObj.channelType" />

        <ListItem label="一级业务类型" dict-type-code="FIRST_LEVEL_BUSINESS_TYPE" :value="detailObj.businessType1" />
        <ListItem label="二级业务类型" dict-type-code="SECOND_LEVEL_BUSINESS_TYPE" :value="detailObj.businessType2" />
        <ListItem v-if="[31, '31'].includes(detailObj.businessType2)" label="报修原因" dict-type-code="REPAIR_REASON" :value="detailObj.repairsReason" />
        <!--
          服务费类型显示条件：
          当一级业务类型为咨询(1)，二级业务类型为服务费(13);
          当一级业务类型为投诉/纠纷(2)，二级业务类型为服务费(13)时;
          当赔付原因为服务费(4)时
        -->
        <ListItem
          v-if="
            ([1,2].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 13 ) ||
              (detailObj.compensationCause && (detailObj.compensationCause.includes(4) || detailObj.compensationCause.includes('4')))
          "
          label="服务费类型"
          dict-type-code="SERVICE_FEE_TYPE"
          :value="detailObj.serviceFeeType"
        />
        <!--
          费用类型 条件：
          当一级业务类型为咨询(1)，二级业务类型为费用常规(14)时;
          当一级业务类型为投诉/纠纷(2)，二级业务类型为费用常规(14)时;
          当一级业务类型为业务办理(3)，二级业务类型为费用常规(14)时;
        -->
        <ListItem
          v-if="[1,2,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 14 "
          label="费用类型"
          dict-type-code="EXPENSE_TYPE"
          :value="detailObj.feeType"
        />
        <!--
          赔付原因：条件
          当一级业务类型为咨询(1)，二级业务类型为费用赔付(15)时;
          当一级业务类型为投诉/纠纷(2)，二级业务类型为费用赔付(15)时;
          当一级业务类型为业务办理(3)，二级业务类型为费用赔付(15)时;
          当处理页面的处理方案选择【费用赔付(2)】时
        -->
        <ListItem
          v-if="([1,2,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 15) ||
            (detailObj.handleScheme && (detailObj.handleScheme.includes(2) || detailObj.handleScheme.includes('2')))"
          label="赔付原因"
          dict-type-code="COMPENSATION_REASON"
          :value="detailObj.compensationCause"
        />
        <!--
          发票子业务 条件：
          当一级业务类型为咨询(1)，二级业务类型为发票(16)时;
          当一级业务类型为业务办理(3)，二级业务类型为发票(16)时;
        -->
        <ListItem
          v-if="[1,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 16"
          label="发票子业务"
          dict-type-code="INVOICE_SUB_SERVICE"
          :value="detailObj.invoiceSubBusiness"
        />
        <!--当一级业务类型为投诉/纠纷(2)时-->
        <ListItem v-if="Number(detailObj.businessType1 || 0)===2" label="投诉原因" dict-type-code="COMPLAINTS_REASON" :value="detailObj.complaintCause" />
        <!--
          当一级业务类型为投诉/纠纷(2)，二级业务类型为服务态度(23)时展示此字段
        -->
        <ListItem
          v-if="Number(detailObj.businessType1 || 0)===2 && Number(detailObj.businessType2 || 0)===23 "
          label="被投诉对象"
          dict-type-code="OBJECT_OF_COMPLAINT"
          :value="detailObj.complaintObject"
        />
        <!--
          顾客不认可原因 条件：
          当【投诉原因】为“顾客不认可处理方案导致(57)”时
        -->
        <ListItem
          v-if="detailObj.complaintCause && (detailObj.complaintCause.includes(57) || detailObj.complaintCause.includes('57'))"
          label="顾客不认可原因"
          dict-type-code="CUSTOMER_DISAGREE_REASON"
          :value="detailObj.customerDisapprovalCause"
        />
        <!--
            投诉类型展示条件：
            当【一级业务类型】为“投诉/纠纷”(2)时
          -->
        <ListItem
          v-if="Number(detailObj.businessType1 || 0)===2"
          label="投诉类型"
          dict-type-code="COMPLAINTS_TYPE"
          :value="detailObj.complaintType"
        />

        <!--
          1.当一级业务类型为咨询(1)，二级业务类型为退货(18)时，展示该字段；
          2.当一级业务类型为咨询(1)，二级业务类型为换货(19)时，展示该字段；
          3.当一级业务类型为业务办理(3)，二级业务类型为退货(18)时，展示该字段；
          4.当一级业务类型为业务办理(3)，二级业务类型为换货(19)时，展示该字段；
        -->
        <ListItem
          v-if="[1,3].includes(Number(detailObj.businessType1 || 0)) && [18,19].includes(Number(detailObj.businessType2 || 0))"
          label="退/换货原因"
          dict-type-code="RETURN_REPLACEMENT_REASON"
          :value="detailObj.returnsCause"
        />
        <ListItem label="产品问题" dict-type-code="PRODUCT_PROBLEM" :value="detailObj.productProblem" />
        <!--
          运损类型 展示条件：
          【产品问题】为运损(5)时才展示此字段
        -->
        <!-- v-if="detailObj.repairsReason && (detailObj.repairsReason.includes(7) || detailObj.repairsReason.includes('7'))" -->
        <ListItem
          v-if="detailObj.transportationLossType"
          label="运损类型"
          dict-type-code="TRANSPORT_DAMAGE_TYPE"
          :value="detailObj.transportationLossType"
        />
        <ListItem label="产品类型" dict-type-code="PRODUCT_TYPE" :value="detailObj.productType" />
        <ListItem label="功能空间" dict-type-code="FUNCTIONAL_SPACE" :value="detailObj.functionalSpace" />
        <ListItem label="产品品类" dict-type-code="PRODUCT_CATEGORY" :value="detailObj.productCategory" />
        <ListItem v-if="detailObj.productMode" label="产品型号" :value="detailObj.productMode" />
        <ListItem v-if="detailObj.productCode" label="产品编码" :value="detailObj.productCode" />
        <ListItem v-if="detailObj.productName" label="产品名称" :value="detailObj.productName" />

        <ListItem
          label="业务部门"
          dict-type-code="RESPONSIBLE_DEPARTMENT"
          :value="detailObj.bpmDeptCode"
        />
        <!-- 加盟信息 -->
        <template v-if="showJoinIn">
          <ListItem
            label="是否有店面"
            dict-type-code="ISOWN"
            :value="detailObj.hasShop"
          />
          <ListItem label="店面总面积" :value="detailObj.shopArea" />
          <ListItem
            label="意向经营业务"
            dict-type-code="BIZ_TYPE"
            :value="detailObj.bizType"
            app-code="slm"
          />
          <ListItem
            label="意向客户分类"
            dict-type-code="CTM_TOBE_CUSTOMER_TYPE"
            :value="detailObj.potentialType"
            app-code="slm"
          />
        </template>
        <ListItem :span="24" label="来电明细" :value="detailObj.callContent" />
        <ListItem :span="24" label="客服意见" :value="detailObj.customerServiceOpinion" />
        <ListItem label="责任部门" :value="detailObj.receiveDeptNames" />
        <ListItem label="办事处" :value="detailObj.officeName" />
        <ListItem label="经销商" :value="detailObj.disName" />
        <ListItem label="门店" :value="detailObj.shopName" />
        <ListItem label="商家回复" dict-type-code="CUSTOMER_APPLY_STATUS" :value="detailObj.customerApplyStatus" />

        <ListItem label="售后联系人电话" :value="detailObj.afterSalesCall" />

        <ListItem label="紧急程度" dict-type-code="URGENCY_DEGREE" :value="detailObj.urgencyDegree" />
        <ListItem label="紧急原因备注" :value="detailObj.urgencyCause || '--'" />
        <ListItem label="是否超期" :value="Number(detailObj.isOverdue) === 1 ? '超期' : Number(detailObj.isOverdue) === 0 ? '未超期' : '--'" />
        <ListItem label="超期原因" dict-type-code="OVERDUE_REASON" :value="detailObj.overdueReason" />

        <ListItem label="超时工单" :value="Number(detailObj.isTimeoutOrder) === 1 ? '是' : Number(detailObj.isTimeoutOrder) === 0 ? '否' : '--'" />
        <ListItem label="是否超时" :value="Number(detailObj.isTimeout) === 1 ? '超时' : Number(detailObj.isTimeout) === 0 ? '未超时' : '--'" />
        <ListItem v-if="Number(detailObj.isTimeoutOrder) === 1" label="超时原因" :value="detailObj.overtimeReason" dict-type-code="OVER_TIME_REASON" />
        <ListItem label="处理截止时间" :value="detailObj.processingDeadline || '--'" />

        <ListItem label="处理时效" dict-type-code="TIMEOUT_REASON" :value="detailObj.timeoutReason" />
        <ListItem label="处理人" :value="detailObj.handlerList instanceof Array ? detailObj.handlerList.map(e=>`${e.handlerName}(${e.handler})`).join(','):''" />
        <ListItem
          label="处理方案"
          dict-type-code="PROCESS_METHOD"
          :value="detailObj.handleScheme"
        />
        <!--
          支付方式展示条件：
          1.当一级业务类型为咨询(1)，二级业务类型为费用常规(14)时，展示该字段；
          2.当一级业务类型为投诉/纠纷(2)，二级业务类型为费用常规(14)时，展示该字段；
          3.当一级业务类型为业务办理(3)，二级业务类型为费用常规(14)时，展示该字段；
          4.当一级业务类型为咨询(1)，二级业务类型为费用赔付(15)时，展示该字段；
          5.当一级业务类型为投诉/纠纷(2)，二级业务类型为费用赔付(15)时，展示该字段；
          6.当一级业务类型为业务办理(3)，二级业务类型为费用赔付(15)时，展示该字段；
          7.当处理方案为费用赔付(2)/赠品(3)/退差(11)/退款(12)时，展示该字段。
        -->
        <ListItem
          v-if="
            ([1,2,3].includes(Number(detailObj.businessType1 || 0)) && [14,15].includes(Number(detailObj.businessType2 || 0))) || (
              detailObj.handleScheme &&
              (detailObj.handleScheme.includes(2) || detailObj.handleScheme.includes('2') ||
              detailObj.handleScheme.includes(3) || detailObj.handleScheme.includes('3')||
              detailObj.handleScheme.includes(11) || detailObj.handleScheme.includes('11')||
              detailObj.handleScheme.includes(12) || detailObj.handleScheme.includes('12'))
            )
          "
          label="支付方式"
          dict-type-code="PAYMENT_MODE"
          :value="detailObj.paymentMode"
        />
        <!--
            1.当一级业务类型为咨询(1)，二级业务类型为费用赔付(15)时，展示该字段；
            2.当一级业务类型为投诉/纠纷(2)，二级业务类型为费用赔付(15)时，展示该字段；
            3.当一级业务类型为业务办理(3)，二级业务类型为费用赔付(15)时，展示该字段；
            4.当处理方案为费用赔付(2)/退差(11)/退款(12)时，展示该字段。
          -->
        <ListItem
          v-if="
            ([1,2,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0)===15)|| (
              detailObj.handleScheme &&
              (detailObj.handleScheme.includes(2) || detailObj.handleScheme.includes('2') ||
              detailObj.handleScheme.includes(11) || detailObj.handleScheme.includes('11')||
              detailObj.handleScheme.includes(12) || detailObj.handleScheme.includes('12'))
            )
          "
          label="赔付金额"
          :value="detailObj.compensationFee"
        />
        <!--
          1.当【支付方式】为赠品(5)时，展示该字段；
          2.手动录入，允许汉字、数字、标点符号
        -->
        <ListItem
          v-if="detailObj.paymentMode && (detailObj.paymentMode.includes(5) || detailObj.paymentMode.includes('5'))"
          label="赠品名称"
          :value="detailObj.gift"
        />

        <template v-if="[1,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 22">
          <!-- 1.工单一级业务类型为咨询(1)/业务办理(3)，二级业务类型为送装服务(22)，才展示该板块信息。 -->
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="送装服务信息" />
          </ListItem>
          <!-- 58707   送装需求、预约送装服务时间，编辑权限调整
            这两个字段，在ECO和UIP，当一级业务类型为业务办理、二级业务类型为送装服务时，
          这两个字段仅展示，不可编辑；在TOP端，这两个字段可修改，且送装需求这个字段为必填项，
          也就是操作提交按钮时，要校验该字段，不可为空。 -->
          <template v-if="isOfficePge && detailObj.workOrderState !== 3 && !deliveryNeedDisabled">
            <ListItem label="送装需求">
              <CustomDictSelect
                placeholder="请选择"
                dict-type-code="DELIVERY_INSTALL_DEMAND"
                bind-name="dictName"
                bind-value="dictCode"
                filterable
                :echo-value.sync="amendData.deliveryNeed"
              ></CustomDictSelect>
            </ListItem>
            <ListItem label="预约送装服务时间">
              <el-date-picker
                v-model="amendData.bookingServiceTime"
                type="datetime"
                placeholder="选择预约送装服务时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </ListItem>
          </template>
          <template v-else>
            <ListItem
              label="送装需求"
              dict-type-code="DELIVERY_INSTALL_DEMAND"
              :value="detailObj.deliveryNeed"
            />
            <ListItem label="预约送装服务时间" :value="detailObj.bookingServiceTime" />
          </template>
        </template>
        <template v-if="Number(detailObj.businessType1 || 0) === 3 && [18,19,31,32,33].includes(Number(detailObj.businessType2 || 0))">
          <!-- 当一级业务类型为业务办理(3)，二级业务类型为退货(18),换货(19),报修(31)/拆装(33)/保养(32)时，才展示该板块信息。 -->
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="售后服务信息" />
          </ListItem>
          <template v-if="isOfficePge && detailObj.workOrderState !== 3">
            <!--未完结前，均可修改，但是修改权限仅在办事处/经销商 -->
            <ListItem label="服务师傅">
              <SearchSelectPicker
                v-if="detailObj.disCode"
                :url="`/call-center/openapi/v2/workOrderRecord/uip/repairer/${detailObj.disCode}`"
                method="get"
                placeholder="请选择"
                lable-name="name"
                value-name="code"
                :value.sync="amendData.repairTeacherCode"
                :lable.sync="amendData.repairTeacherName"
                @selectChange="repairTeacherChange"
              ></SearchSelectPicker>
            </ListItem>
            <ListItem label="师傅号码">
              <el-input v-model.trim="amendData.repairTeacherPhone" clearable />
            </ListItem>
            <ListItem label="服务费">
              <el-input v-model.trim="amendData.serviceCharge" clearable />
            </ListItem>
            <ListItem label="服务时间">
              <el-date-picker
                v-model="amendData.repairDate"
                type="datetime"
                placeholder="选择服务时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </ListItem>
            <ListItem label="维修进度">
              <CustomDictSelect
                :disabled="detailObj.workOrderState === 3"
                dict-type-code="PROCESS_RATE"
                bind-name="dictName"
                bind-value="dictCode"
                :echo-value.sync="amendData.processRate"
              ></CustomDictSelect>
            </ListItem>

            <ListItem label="核算二次费用">
              <el-select
                v-model="amendData.isTwoCheckComputation"
                placeholder="请选择"
                :disabled="detailObj.workOrderState === 3"
                clearable
                filterable
              >
                <el-option
                  v-for="(itcc,i) in isTwoCheckComputationList"
                  :key="i"
                  :value="itcc.dictCode"
                  :label="itcc.dictName"
                ></el-option>
              </el-select>
            </ListItem>
          </template>
          <template v-else>
            <ListItem label="服务师傅" :value="detailObj.repairTeacherName || '--'" />
            <ListItem label="师傅号码" :value="detailObj.repairTeacherPhone || '--'" />
            <ListItem label="服务费" :value="detailObj.serviceCharge || '--'" />
            <ListItem label="服务时间" :value="detailObj.repairDate || '--'" />、
            <template v-if="Number(detailObj.businessType2 || 0) === 31">
              <!-- 当【二级业务类型】为报修(31)时，展示该字段。 -->
              <ListItem
                label="维修进度"
                dict-type-code="PROCESS_RATE"
                :value="detailObj.processRate"
              />
              <ListItem label="核算二次费用" :value="detailObj.isTwoCheckComputation===1?'是':detailObj.isTwoCheckComputation===0?'否':'--'" />
            </template>
          </template>
        </template>
        <template v-if="Number(detailObj.businessType2 || 0)===31">
          <!-- 当【二级业务类型】为报修(31)时，展示该字段。 -->
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="补件列表" />
          </ListItem>
          <template v-if="isOfficePge">
            <!-- 仅办事处可编辑，责任部门不可编辑 -->
            <ListItem v-if="detailObj.workOrderState !== 3" label="补件单号" :span="8">
              <el-input v-model="patchCode" placeholder="请输入补件单号" clearable />
            </ListItem>
            <ListItem v-if="detailObj.workOrderState !== 3" :span="2">
              <el-button type="primary" @click="handleSearchPatchOrder">确定</el-button>
            </ListItem>
          </template>
          <ListItem :span="24">
            <PbillList
              v-if="detailObj && detailObj.id"
              ref="billList"
              :readonly="detailObj.workOrderState===3 || !isOfficePge"
              :dis-code="detailObj.disCode"
              :patch-code.sync="amendData.patchCode"
              @data-change="billChange"
            ></PbillList>
          </ListItem>
        </template>

        <ListItem :span="24">
          <Title slot="content" class="custom-title" title="产品信息" />
        </ListItem>
        <ListItem :span="24">
          <ShowProductInfoList :table-data="detailObj.productInfoDTOList || []"></ShowProductInfoList>
        </ListItem>
        <template v-if="(detailObj.returnGoodsProcessDTOS || []).length>0">
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="退货进度"></Title>
          </ListItem>
          <ListItem :span="24">
            <ReturnedGoods :table-data="detailObj.returnGoodsProcessDTOS || []"></ReturnedGoods>
          </ListItem>
        </template>

        <template v-if="show">
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="留言信息" />
          </ListItem>
          <ListItem :span="24">
            <el-input v-model="amendData.content" type="textarea" :autosize="{minRows:4}" placeholder="请输入" />
          </ListItem>
        </template>
        <ListItem :span="24">
          <div slot="content" class="button-container" style="padding-top:10px;">
            <DialogUpload
              v-if="hasDetail && show"
              :disabled="!show"
              :prefix="baseURL"
              :on-change="onSuccessHandle"
              :on-remove="onRemoveHandle"
              multiple
              :before-remove="onPreRemoveHandle"
              :exist-file-list="existFileListU"
              :text="show?'附件管理':'查看附件'"
              :title="show?'附件管理':'查看附件'"
              confirm-button-text="添加附件"
            />
            <Button v-if="show" type="primary" @click="submitHandle">提交</Button>
            <!-- <Button type="primary">完成处理</Button> -->
          </div>
        </ListItem>
        <template v-if="!show && orgAnnexList.length">
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="查看附件" />
          </ListItem>
          <ListItem :span="24">
            <el-table
              style="width: 100%"
              :data="orgAnnexList"
              header-row-class-name="table-list-header"
              highlight-current-row
              border
              :max-height="400"
            >
              <el-table-column type="index" label="序号" width="50" />
              <el-table-column prop="fileName" label="附件名称" />
              <el-table-column prop="createTime" label="创建时间" width="150" />
              <el-table-column label="操作" width="100">
                <template v-slot="{row}">
                  <el-link type="primary" @click="handleDownload(row)">查看</el-link>
                </template>
              </el-table-column>
            </el-table>
          </ListItem>
        </template>
        <ListItem :span="24">
          <Title slot="content" class="custom-title" title="工单流水记录" />
        </ListItem>
        <ListItem :span="24">
          <div slot="content">
            <FlowOrder v-for="(f,i) in processingListSort" :key="i" :flow="f" />
          </div>
        </ListItem>
      </List>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Title from '@/components/Title'
import Button from '@/components/Button'
import CustomDictSelect from '@/components/CustomDictSelect'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { List, ListItem } from '@/components/List'
import DialogUpload from '@/components/Upload/DialogUpload'
import FlowOrder from '../components/FlowOrder'
import PbillList from '../components/PbillList'
import ShowProductInfoList from '../components/ShowProductInfoList'
import ReturnedGoods from '../components/ReturnedGoods'
import { getByIdOpenWorkOrderRecord, putOpenWorkOrderRecord } from '@/api/workOrder'
import { mapGetters } from 'vuex'

export default {
  name: 'OtherSysOrderDetails',
  components: {
    ContentWrap,
    ListItem,
    List,
    Title,
    Button,
    CustomDictSelect,
    SearchSelectPicker,
    DialogUpload,
    FlowOrder,
    PbillList,
    ShowProductInfoList,
    ReturnedGoods
  },
  props: {
    // detail: {
    //   type: Object,
    //   default: () => ({})
    // }
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_QUP,
      isOfficePge: this.$route.name === 'officeOrderDetails', // 是否是办事处详情页
      // 坐席修改的数据
      amendData: {
        id: '',
        deliveryNeed: '', // 送装需求
        bookingServiceTime: '', // 预约送装服务时间
        repairTeacherCode: '', // 服务师傅账号
        repairTeacherName: '', // 服务师傅
        repairTeacherPhone: '', // 师傅号码
        serviceCharge: '', // 服务费
        repairDate: '', // 服务时间
        processRate: '', // 维修进度
        isTwoCheckComputation: '', // 核算二次费用
        content: '', // 留言信息
        patchCode: ''// 补件单号
      },
      patchCode: '',
      isTwoCheckComputationList: [
        { dictCode: 1, dictName: '是' },
        { dictCode: 0, dictName: '否' }
      ],
      detailObj: {}, // 详情数据
      // 已经存在的附件
      existFileList: [],
      businessList: [],
      addFileList: [],
      loading: true
    }
  },
  computed: {
    ...mapGetters(['userCache', 'deptList', 'user']),
    show() {
      return this.$route.query.type !== 'preview'
    },
    existFileListU() {
      return [...this.existFileList, ...this.addFileList]
    },
    hasDetail() {
      return Object.keys(this.detailObj || {}).length > 0
    },
    processingListSort() {
      const list = this.detailObj.processingList || []
      return list.sort((f, l) => {
        const fd = new Date(f.createTime).getTime()
        const ld = new Date(l.createTime).getTime()
        return ld - fd
      })
    },
    orgAnnexList() {
      return (this.detailObj && this.detailObj.annexList) || []
    },
    deliveryNeedDisabled() {
      const { businessType1, businessType2 } = this.detailObj
      return [3, '3'].includes(businessType1) && [22, '22'].includes(businessType2)
    },
    showJoinIn() {
      const { businessType1, businessType2 } = this.detailObj
      return [1, '1'].includes(businessType1) && [6, '6'].includes(businessType2)
    }
  },
  watch: {

  },
  created() {
    this.getDetailData()
  },
  methods: {
    // 上传成功
    onSuccessHandle(file, fileList) {
      this.addFileList = fileList.filter(e => e.status === 'ready')
    },
    // 删除
    onRemoveHandle(file, fileList) {
      this.addFileList = fileList.filter(e => e.status === 'ready')
    },
    // 只能删除自己上传的文件
    onPreRemoveHandle(file, fileList) {
      if (file.status === 'ready') {
        return true
      } else {
        return false
      }
    },
    // 获取详情
    getDetailData() {
      this.loading = true
      this.addFileList = []
      this.existFileList = []
      this.detailObj = {}
      this.content = ''
      getByIdOpenWorkOrderRecord(this.$route.query.id).then(async(res) => {
        const data = res.data
        // data.bpmDeptName = await this.$getDictValue('RESPONSIBLE_DEPARTMENT', data.bpmDeptCode)
        // data.channelTypeName = await this.$getDictValue('CHANNEL_TYPE', String(data.channelType))
        // data.productTypeName = await this.$getDictValue('PRODUCT_TYPE', String(data.productType))
        // data.functionalSpaceName = await this.$getDictValue('FUNCTIONAL_SPACE', String(data.functionalSpace))
        // data.productCategoryName = await this.$getDictValue('PRODUCT_CATEGORY', String(data.productCategory))
        // data.urgencyDegreeName = await this.$getDictValue('URGENCY_DEGREE', String(data.urgencyDegree))
        // data.overdueReasonName = await this.$getDictValue('OVERDUE_REASON', String(data.overdueReason))
        // data.timeoutReasonName = await this.$getDictValue('TIMEOUT_REASON', String(data.timeoutReason))
        // data.workOrderStateName = await this.$getDictValue('WORK_ORDER_STATUS', String(data.workOrderState))
        // data.processRate = await this.$getDictValue('PROCESS_RATE', String(data.processRate))
        // data.businessType1Name = await this.$getDictValue('FIRST_LEVEL_BUSINESS_TYPE', String(data.businessType1))
        // data.businessType2Name = await this.$getDictValue('SECOND_LEVEL_BUSINESS_TYPE', String(data.businessType2))

        this.initFormData(data)
        this.detailObj = data
        const files = this.detailObj.annexList || []
        this.existFileList = files.map(f => {
          return {
            url: f.filePath,
            name: f.fileName
          }
        })
      }).finally(() => {
        this.loading = false
      })
    },
    // 初始化表单数据
    initFormData(data) {
      const toStringArr = ['processRate'] // 需转换为字符串的字段
      const numToStrArr = ['deliveryMethod'] // 数字转换为字符串

      Object.keys(this.amendData).forEach(key => {
        if (toStringArr.indexOf(key) !== -1) {
          if (data[key] !== undefined && data[key] !== null && data[key] !== '') {
            this.$set(this.amendData, key, String(data[key]))
          } else {
            this.$set(this.amendData, key, '')
          }
        } else if (numToStrArr.indexOf(key) !== -1) {
          this.$set(this.amendData, key, this.$numToString(data[key]))
        } else {
          this.$set(this.amendData, key, data[key] || '')
        }
      })
      if (data.saveContent) {
        this.amendData.content = `${data.saveContent}${this.amendData.content || ''}`
      }
    },
    // 提叫
    // putOpenWorkOrderRecord
    submitHandle() {
      if (!this.amendData.content) {
        this.$message.error('请输入留言信息！')
        return
      }
      const data = new FormData()
      for (const file of this.addFileList) {
        data.append('files', file.raw)
      }
      let jsonObj = {
        id: this.detailObj.id,
        deptName: this.userCache.remoteOrganizations[0].orgName,
        handler: this.user.account,
        handlerName: this.user.userName,
        receiveSystem: 'UIP',
        patchCode: this.amendData.patchCode,
        content: '留言内容：' + this.amendData.content
      }
      if (this.isOfficePge && this.detailObj.workOrderState !== 3) {
        if (Number(this.detailObj.businessType1 || 0) === 3 && [18, 19, 31, 32, 33].includes(Number(this.detailObj.businessType2 || 0))) {
          if (this.amendData.repairTeacherCode) {
            if (!this.amendData.repairTeacherPhone || !/^1[3456789]\d{9}$/.test(this.amendData.repairTeacherPhone)) {
              this.$message.warning('请输入有效的服务师傅电话号码')
              return
            }
          } else {
            if (this.amendData.repairTeacherPhone && !/^1[3456789]\d{9}$/.test(this.amendData.repairTeacherPhone)) {
              this.$message.warning('请输入有效的服务师傅电话号码')
              return
            }
          }
          jsonObj = { ...jsonObj, ...this.amendData }
        }
      }

      data.append('jsonStr', JSON.stringify(jsonObj))
      data.append('receiveId', this.detailObj.receiveId)
      return putOpenWorkOrderRecord(data).then(res => {
        this.$message.success('提交成功！')
        this.getDetailData()
      })
    },
    // 查询补件单号对应的列表
    handleSearchPatchOrder() {
      const codes = this.patchCode.trim().replace(/，/g, ',').split(',').filter(v => !!v)
      if (codes.length === 0) {
        this.patchCode = ''
        this.$message.warning('请输入补件单号')
        return
      }
      const patchCodeList = this.amendData.patchCode ? this.amendData.patchCode.split(',').filter(v => v !== '') : []
      const pbillIds = Array.from(new Set([...patchCodeList, ...codes]))
      this.$set(this.amendData, 'patchCode', pbillIds.join(','))
      this.$nextTick(() => {
        this.$refs.billList.getData()
      })
    },
    // 补件查询结果变更
    billChange(data) {
      this.patchCode = ''
      const pbillIds = data.map(v => v.auditCode).join(',')
      this.$set(this.amendData, 'patchCode', pbillIds)
    },
    // 关闭当前Tag
    closeCurrentTag() {
      this.$router.go(-1)
      this.$closePage()
    },
    // 维修师傅变更
    repairTeacherChange(data) {
      this.$set(this.amendData, 'repairTeacherPhone', (data && data.phone) || '')
    },
    // 不是图片直接查看
    handleDownload(file) {
      const a = document.createElement('a')
      // FIXME: 根据实际情况修改
      let url = file.filePath
      const objExp = new RegExp(/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/)
      if (!objExp.test(url)) {
        if (!/^\/img/.test(url)) {
          url = process.env.VUE_APP_BASE_QUP + url
        }
      }
      a.href = url
      a.download = file.fileName
      a.target = '_bank'
      // document.body.append(a)
      a.click()
    }
  }
}
</script>
<style lang='scss' scoped>
.details{

}
.details .content-wrap {
  padding: 10px 25px;
}
.details .content-wrap /deep/ .el-row .el-col {
  line-height: 38px;
}
.details .content-wrap /deep/ .el-row .custom-list-item {
  margin-bottom: 0;
}
.details .content-wrap /deep/ .el-row .custom-list-item .label-style {
  text-align-last: right;
}
.details .content-wrap /deep/ .el-row .custom-list-item span:first-child {
  // width: 90px;
  font-size: 12px;
  text-align: right;
}
.details .content-wrap /deep/ .el-row .custom-list-item span:last-child {
  font-size: 12px;
}
.details .content-wrap .el-row .afterCall {
  overflow: inherit !important;
}
.details {
  /deep/ .el-autocomplete {
    width: 100%;
  }
  /deep/ .my-autocomplete {
    & li {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      padding: 7px;

      .tel {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .name {
        font-size: 12px;
        color: #b4b4b4;
      }
      .highlighted .name {
        color: #ddd;
      }
    }
  }
}
.details .content-wrap /deep/ .call-detail {
  line-height: 24px;
}
.details .content-wrap /deep/ .custom-title {
  padding: 0;
}
.details .content-wrap /deep/ .order-top {
  // padding-top: 30px;
}
.details .content-wrap /deep/ .custom-title h3 {
  font-weight: bold;
  font-size: 14px;
  color: #16BC83;
}
.details .content-wrap /deep/ .order-list {
  line-height: 18px;
}

.details .content-wrap /deep/ .order-list p:first-child {
  width: 20%;
  flex: 0 0 20% !important;
}
.details .content-wrap /deep/ .order-list p:nth-child(2) {
  width: 20%;
  flex: 0 0 20% !important;
}
.details .content-wrap /deep/ .order-list p:nth-child(3) {
  width: 37%;
  flex: 0 0 37% !important;
}
.details .content-wrap /deep/ .order-list p:last-child {
  width: 15%;
  flex: 0 0 15% !important;
}
// 短信图标
.sms{
  color:#00926d;
  cursor: pointer;
}
</style>
<style lang="scss">
  .noneTick{
    & [class*="el-button el-picker-panel__link-btn el-button--text el-button--mini"]{
      display: none;
    }
  }
  .details{
    [class*="el-input-group__append"]{
      padding: 0 5px !important;
    }
  }
</style>
